<template>
  <span ref="scrollIntoView"></span>
  <div v-if="store.childModel">
    <div class="item-box" v-if="store.childModel.showpieceTotal > 0">
      <div class="banner-box" v-if="store.childModel.value">
        <img
          class="banner-img t-image--fit-cover t-image--position-center"
          :src="$filters.getLinkUrl(info.value + '?imageView2/0/w/2560/h/format/webp')"
          alt=""
        />
      </div>

      <div
        class="banner-content"
        :style="{
          paddingTop: store.childModel.value ? '80px' : '160px',
          paddingBottom: store.childModel.showpieceTotal > 0 ? '0px' : '50px',
        }"
      >
        <titles :title="info.text" />
        <div class="subTitle" v-if="info.subTitle">——{{ info.subTitle }}</div>
        <!-- <span
        class="banner-content-title"
        :style="{
          fontSize: store.styleInfo.contentSize,
          
          color: store.styleInfo.fontColor,
        }"
        >{{ info.remarks }}</span
      > -->
        <div
          class="remarks-parent-box banner-content-title"
          :style="{
            fontSize: store.styleInfo.contentSize,

            color: store.styleInfo.fontColor,
          }"
          v-html="getTextHtml(info.remarks)"
          style="width: 1180px; margin: auto; padding-top: 20px"
        ></div>
      </div>
    </div>
    <div v-else>
      <div style="padding-top: 160px" class="banner-content1">
        <titles :title="store.childModel?.text" />
        <div class="subTitle" v-if="store.childModel.subTitle">——{{ store.childModel.subTitle }}</div>
      </div>
      <div style="width: 1180px; margin: auto; padding-top: 20px" v-if="info.value">
        <img
          class="t-image--fit-cover t-image--position-center"
          style="width: 100%; height: 100%"
          :src="$filters.getLinkUrl(info.value + '?imageView2/0/w/1180/format/webp')"
          alt=""
        />
      </div>
      <div
        class="remarks-parent-box"
        :style="{
          fontSize: store.styleInfo.contentSize,

          color: store.styleInfo.fontColor,
        }"
        v-html="getTextHtml(info?.remarks)"
        style="width: 1180px; margin: auto; padding-top: 20px; padding-bottom: 80px"
      ></div>
      <!-- <span
        
        style="lineheight: '32px'"
        >{{  }}</span
      > -->
    </div>
    <div class="child-content">
      <!-- 展品 -->
      <pageChildItem2 />
    </div>
  </div>
  <!-- <NavVue @top="top" :flag="true"></NavVue> -->
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'itemChild1',
});
</script>
<script setup lang="ts">
// @ts-nocheck
import { getTextHtml } from '@/utils/minxin';
import templateText from '@/components/templateText/templateText.vue';
import { urls } from '@/utils/request/upload';
import { ref, watch, computed, reactive, onMounted } from 'vue';
import titles from '@/components/title/title.vue';
import { moduleShowpieces } from '@/api/exhibit/exhibit';
import heardTitle from './heardTitle.vue';
import pageChildItem2 from './components/pageChildItem2.vue';
import { storeToRefs } from 'pinia';
import { useProjectStore } from '@/store';
import NavVue from './components/nav.vue';
import { useRoute } from 'vue-router';
const store = useProjectStore();
const scrollIntoView = ref(null);
const route = useRoute();
const { childModel, styleInfo } = storeToRefs(store);

const info = ref({});
const list = ref([]);
const parmas = reactive({
  pageSize: 12,
  pageNo: 1,
  id: 0,
  value: '',
});
info.value = childModel.value;

watch(
  () => styleInfo,
  (value) => {
    // const foundElement = styleInfo.value.moduleList.find((item) => item.id === childModel.value.id);
    // store.setchildModel(foundElement);
    if (route.query.childId) {
      const foundElement = styleInfo.value.moduleList.find((item) => item.id === Number(route.query.childId));
      // console.log(foundElement, 'foundElement--------');

      store.setchildModel(foundElement);
      info.value = store.childModel;
    } else {
      // const foundElement = styleInfo.value.moduleList.find((item) => item.id === childModel.value.id);
      // store.setchildModel(foundElement);
    }
  },
  { immediate: true, deep: true },
);
watch(
  () => route.query.childId,
  (value) => {
    // const foundElement = styleInfo.value.moduleList.find((item) => item.id === childModel.value.id);
    // store.setchildModel(foundElement);
    if (route.query.childId) {
      const foundElement = styleInfo.value.moduleList.find((item) => item.id === Number(route.query.childId));
      // console.log(foundElement, 'foundElement--------');

      store.setchildModel(foundElement);
      info.value = store.childModel;
    } else {
      // const foundElement = styleInfo.value.moduleList.find((item) => item.id === childModel.value.id);
      // store.setchildModel(foundElement);
    }
  },
  { immediate: true, deep: true },
);
watch(
  () => childModel,
  (value) => {
    info.value = store.childModel;
  },
  { deep: true },
);
const top = () => {
  scrollIntoView.value.scrollIntoView({ behavior: 'smooth' });
};

onMounted(() => {
  const foundElement = styleInfo.value.moduleList.find((item) => item.id === Number(route.query.childId));
  store.setchildModel(foundElement);
});
</script>

<style lang="less" scoped>
.item-box {
  width: 100%;
  height: 100%;
  // min-height: 100vh;
}
.banner-box {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  height: 500px;
}
.banner-img {
  width: 100%;
  height: 500px;
  object-fit: cover;
}
.banner-content {
  // position: absolute;
  width: 100%;
  height: 100%;
  background: #faf9f7;
  // bottom: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 160px;
  // padding-bottom: 50px;
}
.banner-content-title {
  width: 1180px;
  // font-weight: 500;
  // color: #ffffff;
  margin-top: 50px;
  font-size: 16px;
  // font-family: SourceHanSerifCN-Medium, SourceHanSerifCN;
  // font-weight: 500;
  color: #333333;
  line-height: 24px;
  text-indent: 2em;
  text-align: justify;
  // display: -webkit-box;
  // -webkit-box-orient: vertical;
  // -webkit-line-clamp: 7; /* 最多显示的行数 */
  // overflow: hidden; /* 隐藏超出部分 */
  // text-overflow: ellipsis; /* 超出部分显示省略号 */
}
.child-content {
  // padding: 0px 230px;
}
// .banner-content {
//   :deep(.title-boxs-item) {
//     color: #ffffff !important;
//   }
//   :deep(.iconfonts) {
//     color: #ffffff !important;
//   }
// }
// .banner-content-title {
//   color: #ffffff !important;
// }
.remarks-parent-box {
  display: flex;
  flex-direction: column;
  line-height: 32px;
  text-indent: 2em;
  :deep(span) {
    margin-bottom: 24px;
    text-align: justify;
  }
  :deep(span:last-of-type) {
    margin-bottom: 0px !important;
  }
}
.subTitle {
  color: #333;
  font-family: 'SourceHanSerifCN-medium';
  font-size: 18px;
  font-style: normal;
  text-align: center;
  line-height: 30px; /* 166.667% */
  margin-top: 8px;
}
.banner-content1 {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
</style>
